<template>
<!--    <div class="basic_wrap">-->
<!--      <div class="red_top_bg">-->
<!--        <div class="back_left" @click="$router.back()"></div>-->
<!--        <div class="record" @click="$router.push('/draw/record')">-->
<!--          <img src="../img/user/record_w.png">-->
<!--        </div>-->
<!--      </div>-->
<!--      <div class="zp-bg1">-->
<!--        <div class="top_bg">-->
<!--        </div>-->
<!--        <div class="overall flex_center">-->
<!--          <div class="zp-top">-->
<!--            <div class="zp-box">-->
<!--              <div class="panzi">-->
<!--                <div class="bck-box" :style="` transform: rotate(${-90+180/list.length}deg)`">-->
<!--                  <div class="bck" v-for="(i,index) in list" :key="index"-->
<!--                       :style="`transform: rotate(${-index*360/list.length}deg) skew(${-90 + 360/list.length}deg);`">-->
<!--                  </div>-->
<!--                </div>-->
<!--                <div class="jiang"-->
<!--                     :style="`transform: rotate(${-index*360/list.length}deg) translateY(-85px);`"-->
<!--                     v-for="(i,index) in list" :key="index">-->
<!--                  <span class="title">{{i.title}}</span>-->
<!--                  <div class="img">-->
<!--                    <img :src="i.img" alt />-->
<!--                  </div>-->
<!--                </div>-->
<!--              </div>-->
<!--              <div class="start-btn" @click="draw()"></div>-->
<!--            </div>-->
<!--          </div>-->
<!--        </div>-->
<!--        <div class="zp-num">-->
<!--          <span>{{$t('draw.myPoints')}}</span>-->
<!--          <span>{{point_total}}</span>-->
<!--        </div>-->
<!--      </div>-->
<!--      <div class="zp-bg2">-->
<!--        <div class="block_div item">-->
<!--          <div class="title">-->
<!--            {{$t('draw.rule')}}-->
<!--          </div>-->
<!--          <div class="title_bg">-->
<!--          </div>-->
<!--          <div class="content" v-html="rule_content"></div>-->
<!--        </div>-->
<!--      </div>-->
<!--    </div>-->
    <div class="basic_wrap">
      <div class="newTitle">
        <img src="@/assets/img/leftGray.png" class="backIcon" @click="$router.back()">
        <div class="title">盲盒</div>
      </div>
      <div class="goodsWrap">
        <div class="goods">
          <div class="goodsList">
             <div class="goodsItem" v-for="(i,index) in list" :key="index">
               <img :src="i.img" class="goodsImg" />
             </div>
          </div>
        </div>
      </div>
      <div class="tip">
        盲盒奖品十四个工作日内发货
      </div>
      <div class="openBox">
        <div class="opTop">
          <img src="@/assets/img/boxImg.png" class="boxImg" :class="[isHeartbeat ? 'heartbeat':'']">
        </div>
        <div class="opBot">
          <img src="@/assets/img/boxBot.png" class="opBotImg">
          <div class="opBotBtw">
            <div class="opBTN" @click="draw()">开启盲盒</div>
            <div class="opBTNTIp">剩余次数：{{draw_num}}</div>
          </div>
        </div>
      </div>
      <div class="rule">
        <div class="ruleBox">
          <div class="littleBox">
            <div class="ruleTitle">盲盒次数获得</div>
            <div class="ruleList">
              <div class="ruleItem" v-for="(item,index) in give_list" :key="index">
                <div v-if="item.give_type == 1">购买理财总额达到<span style="color: red;font-size: 16px;font-weight: bold">{{item.invest_total}}</span>U获得<span style="color: red">{{item.draw_num}}次</span>开启盲盒机会</div>
                <div v-if="item.give_type == 2">购买理财总额达到<span style="color: red;font-size: 16px;font-weight: bold">{{item.invest_total}}</span>U<span style="color: red">每天可获得{{item.draw_num}}次</span>开启盲盒机会</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
</template>

<script>
	import Fetch from '../../utils/fetch'
	import bsHeader from '../../components/bsHeader.vue'
	import Vue from 'vue';
	import {
		Empty,
		Icon,
		Dialog
	} from 'vant';
	Vue.use(Icon).use(Empty).use(Dialog);
	export default {
		computed: {
			animationClass() {
				//对应css样式中定义的class属性值,如果有更多的话可以继续添加  case 8:   return 'wr8'
				switch (this.winner) {
					case 0:
						return 'wr0'
					case 1:
						return 'wr1'
					case 2:
						return 'wr2'
					case 3:
						return 'wr3'
					case 4:
						return 'wr4'
					case 5:
						return 'wr5'
					case 6:
						return 'wr6'
					case 7:
						return 'wr7'
				}
			}
		},
		data() {
			return {
				winner: 2, //指定获奖下标 specified为true时生效
				specified: true, //是否指定获奖结果，false时为随机
				loading: false, //抽奖执行状态，防止用户多次点击
				panziElement: null,
				listLength: 0,
				list: [],
				rule_content: '',
				draw_num: 0,
				times: 0,
				point_total:0,
				point:9999999,
        isHeartbeat:false,
        give_list:[]
			}
		},
		created() {
			if (window.plus) {
				plus.navigator.setStatusBarBackground('#071c45');
				plus.navigator.setStatusBarStyle('light');
			}
			this.$parent.footer('user', false);
		},
		mounted() {
			this.start();
		},
		methods: {
      startAnimation() {
        this.imageStyle.animation = 'heartbeat 1s infinite';
      },
      stopAnimation() {
        this.imageStyle.animation = 'none';
      },
			start() {
				Fetch('/user/prizeList').then((r) => {
					this.list = r.data.prizeList;
					this.draw_num = r.data.drawNum;
          this.give_list  = r.data.give_list
					this.point_total = r.data.point_total;
					this.point = r.data.point;
					// this.rule_content = r.data.set.content;
					this.times = r.data.drawNum;
					if (this.times > 1) this.times = 2;
					//通过获取奖品个数，来改变css样式中每个奖品动画的旋转角度
					// var(--nums) 实现css动画根据奖品个数，动态改变
					let root = document.querySelector(':root');
					root.style.setProperty('--nums', this.list.length);
				});
			},
			//开始抽奖
			draw() {
				if (!this.loading) {
          this.loading = true
					if (this.point_total < this.point) {
						this.$toast(this.$t('draw.pointsEmpty'));
						return false;
					}
          this.isHeartbeat = true
					// this.panziElement = document.querySelector('.panzi')
					// this.panziElement.classList.remove(this.animationClass)
					if (this.specified) { //此处可指定后端返回的指定奖品
						Fetch('/user/draw').then((r) => {
							let index = this.list.findIndex(item => item.id == r.data.draw.id);
							this.winner = index;
							this.winCallback(r.data.drid);
							this.point_total = this.point_total - this.point;
              this.loading = false
              this.start()
						}).catch(()=>{
              this.isHeartbeat = false
              this.loading = false
            });
					} else {
						this.winner = this.random(0, this.list.length - 1)
						this.winCallback()
            this.loading = false
					}
				}
			},
			//中奖返回方法
			winCallback() {
				setTimeout(() => {
					/* 此处是为了解决当下次抽中的奖励与这次相同，动画不重新执行的 */
					/* 添加一个定时器，是为了解决动画属性的替换效果，实现动画的重新执行 */
					// this.panziElement.classList.add(this.animationClass)
				}, 0)
				// 因为动画时间为 3s ，所以这里3s后获取结果，其实结果早就定下了，只是何时显示，告诉用户
				setTimeout(() => {
          this.isHeartbeat = false
					this.loading = false
					if (this.list[this.winner]['type'] == 1 || this.list[this.winner]['type'] == 2) {
						Dialog.alert({
							message: this.$t('draw.congratulation') + this.list[this.winner]['title'],
							confirmButtonText: this.$t('utils.confirm')
						})
					} else if (this.list[this.winner]['type'] == 3) {
						this.$toast(this.$t('draw.unfortunately'));
					}
				}, 3000)
			},
			//随机一个整数的方法
			random(min, max) {
				return parseInt(Math.random() * (max - min + 1) + min)
			}
		}
	}
</script>

<style lang="scss" scoped>
@keyframes heartbeat {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.5);
  }
  100% {
    transform: scale(1);
  }
}
.basic_wrap{
  background-image: url(../../assets/img/bg1.png);
  background-size: cover;
  background-position: center top;
  min-height: 100vh;
  width: 100vw;
  box-sizing: border-box;
  padding-bottom: 40px;
  .newTitle{
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    .backIcon{
      position: absolute;
      top: 50%;
      left: 20px;
      transform: translate(-50%,-50%);
      width: 16px;
      height: 16px;
    }
    .title{
      font-size: 16px;
      font-weight: bold;
      color: #ffffff;
    }
  }
  .goodsWrap{
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 26px;
     .goods{
        width: 91vw;
        height: 94px;
        background-image: url(../../assets/img/goodsImg.png);
        background-size: cover;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        .goodsList{
          margin-left: 11%;
          display: flex;
          overflow: auto;
          .goodsItem{
            .goodsImg{
              height: 70px;
              width: 70px;
              margin-right: 10px;
            }
          }
        }
     }
  }
  .tip{
    display: flex;
    justify-content: center;
    color: #A3A3A3;
    margin-top: 13px;
  }
  .openBox{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-top: 44px;
    .opTop{
      position: relative;
      width: 181px;
      height: 181px;
       .boxImg{
         position: absolute;
         top: 0;
         width: 181px;
         height: 181px;
         z-index: 999;
       }
      .heartbeat{
        animation: heartbeat 1s infinite;
        transition: transform 0.3s ease-in-out;
      }
    }
    .opBot{
      margin-top: -20px;
      position: relative;
       .opBotImg{
         width: 264px;
         height: 264px;
       }
      .opBotBtw{
        position: absolute;
        bottom: 30px;
        width: 264px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        .opBTN{
          width: 225px;
          height: 44px;
          background: linear-gradient(0deg, #E66FFF 0%, #3947FF 100%);
          border-radius: 8px;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 16px;
          color: #ffffff;
          font-weight: bold;
        }
        .opBTNTIp{
          width: 115px;
          height: 25px;
          background: #FFF9DF;
          border-radius: 12px;
          display: flex;
          align-items: center;
          justify-content: center;
          color: #FF6E24;
          margin-top: 16px;
        }
      }
    }
  }
  .rule{
    display: flex;
    justify-content: center;
    .ruleBox{
      width: 91vw;
      min-height: 200px;
      background: #BFEAFD;
      border-radius: 8px;
      box-sizing: border-box;
      padding: 10px;
      .littleBox{
        background: linear-gradient(0deg, #F7FDFF 0%, #E8FFFD 100%);
        height: 100%;
        border-radius: 8px;
        box-sizing: border-box;
        padding: 16px 10px;
        .ruleTitle{
           font-size: 16px;
          font-weight: bold;
        }
        .ruleList{
          margin-top: 10px;
          .ruleItem{
            padding: 12px 0 12px 12px;
            background: #D7EFFF;
            border-radius: 8px;
            margin-bottom: 8px;
          }
        }
      }
    }
  }
}
</style>


